<template>
	<view class="enjoy-record">
		<!-- 畅玩记录 -->
		<view class="enjoy-record-card" @click="openPopup">
			<view class="card-top">
				<enjoyThemeText title="20分钟/专区" :textStrokeWhite="true" />
				<!-- 畅玩时间 -->
				<text class="enjoy-time">
					2023-05-16 13:11:12
				</text>
			</view>
			<view class="card-bottom">
				<!-- 横向滚动 -->
				<scroll-view scroll-x="true" style="width: 550rpx;">
					<view class="record-scroll-view">
						<view class="record-view" v-for="item in 9">
							<!-- 边框背景 -->
							<image :src="imageUrl('enjoy-record-border.png')" mode="" class="record-view-bg" />
							<!-- 畅玩图片 -->
							<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
								class="record-view-pic" />
						</view>
					</view>
				</scroll-view>
				<image :src="imageUrl('enjoy-record-number.png')" mode="" class="enjoy-record-number"
					data-text="共19件" />
			</view>
		</view>

		<!-- 弹出层 -->
		<u-popup :show="showDetail" mode="center" bgColor="transparent" @close="closePopup">
			<view class="record-popup">
				<image :src="imageUrl('enjoy-record-popup.png')" mode="" class="record-popup-bg" />
				<!-- 信息 -->
				<view class="record-info">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="record-info-pic" />
					<view class="record-info-name pdl-20">
						<text class="type" data-text="至尊款">
							至尊款
						</text>
						<text>商品名称商品名称</text>
					</view>
					<view class="pdl-20">
						参考价：<text style="color: #FF7803;font-size: 32rpx;">¥699</text>
					</view>
					<view class="pdl-20">
						获得时间：<text style="font-size: 24rpx;">2023-05-15 13:11:12</text>
					</view>
				</view>
				<!-- 关闭按钮 -->
				<uni-icons type="close" size="64rpx" color="#fff" class="close-icon" @click="closePopup"></uni-icons>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import enjoyThemeText from './components/enjoyThemeText.vue'
	export default {
		components: {
			enjoyThemeText
		},
		data() {
			return {
				showDetail: false
			}
		},
		methods: {
			openPopup() {
				this.showDetail = true
			},
			closePopup() {
				this.showDetail = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #0A0A0A;
	}

	.enjoy-record {
		padding: 0 30rpx;
		font-size: 24rpx;

		.enjoy-record-card {
			.card-top {
				display: flex;
				justify-content: space-between;
				width: 552rpx;
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);

				.enjoy-time {
					// 底部对齐
					display: flex;
					align-items: flex-end;
					color: #D0D0D0;
				}
			}

			.card-bottom {
				position: relative;
				display: flex;
				align-items: center;

				.record-scroll-view {
					display: flex;
					width: 550rpx;
					padding: 20rpx 0;

					.record-view {
						position: relative;
						margin-right: 18rpx;

						// 边框背景
						.record-view-bg {
							position: absolute;
							width: 108rpx;
							height: 114rpx;
						}

						// 专区图片
						.record-view-pic {
							width: 108rpx;
							height: 108rpx;
							border-radius: 0 20rpx 0 20rpx;
						}
					}
				}

				.enjoy-record-number {
					position: absolute;
					// top: 0;
					right: 0;
					width: 140rpx;
					height: 140rpx;
					overflow: hidden;

					&::after {
						position: absolute;
						top: 50%;
						left: 50%;
						width: 140rpx;
						text-align: center;
						content: attr(data-text);
						color: #FF7803;
						transform: translate(-50%, -50%);
					}
				}
			}
		}

		.record-popup {
			position: relative;
			width: 580rpx;
			height: 860rpx;

			// 弹出层边框
			.record-popup-bg {
				position: absolute;
				width: 580rpx;
				height: 780rpx;
			}

			// 信息
			.record-info {
				position: absolute;
				padding: 4rpx 24rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #fff;

				.record-info-pic {
					width: 552rpx;
					height: 552rpx;
				}

				.record-info-name {
					font-size: 36rpx;
					font-weight: 500;

					.type {
						position: relative;
						display: inline-block;
						margin-right: 24rpx;
						font-family: YouSheBiaoTiHei;
						font-size: 32rpx;
						line-height: 34rpx;
						color: #FE2861;
						z-index: 0;

						&::before {
							content: attr(data-text);
							position: absolute;
							left: 0;
							z-index: -1;
							-webkit-text-stroke: 4rpx #fff;
						}
					}
				}

				.pdl-20 {
					padding-left: 20rpx;
				}
			}

			// 关闭弹出层
			.close-icon {
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
			}
		}
	}
</style>
